iT邦幫忙

2025 iThome 鐵人賽

DAY 13
0
Modern Web

從0到有做出一個商家網頁系列 第 13

Day13:編輯分頁的內容

  • 分享至 

  • xImage
  •  

今天要來編輯主頁商品圖,改成圖片按下去會跳轉頁面到商品頁面

1.首先先改變商品圖片和文字的版面

HTML程式
https://ithelp.ithome.com.tw/upload/images/20250815/2017605218vg0hpqvf.png

改成按下圖片會跳轉介紹商品的頁面
這段程式<a href="nuts.html"> </a>,就是設定區域內的文字或圖片點擊後,會跳轉到設定的頁面

網頁方面
https://ithelp.ithome.com.tw/upload/images/20250815/2017605252rPD2hWfw.png

2.編輯商品的頁面
方法也是從之前製作頁面的程式碼複製過來,然後再做進一步的修改

HTML程式
https://ithelp.ithome.com.tw/upload/images/20250815/20176052zUivDXs50E.png

並修改一下頁面標題,改成芝麻花生糖

css檔案也是一樣的做法

css程式
https://ithelp.ithome.com.tw/upload/images/20250815/20176052wLFV2sYzsu.png

開始放置內容,這裡我們先放產品圖和文字

HTML程式
https://ithelp.ithome.com.tw/upload/images/20250815/20176052upsB3s3Jj1.png

編輯產品圖和文字的位子和字型大小

css程式
https://ithelp.ithome.com.tw/upload/images/20250815/20176052KUVlZFteVi.png

網頁方面
https://ithelp.ithome.com.tw/upload/images/20250815/201760528DTLTdRq0K.png

今天先做到這邊明天再繼續!


上一篇
Day12:編輯分頁的內容
下一篇
Day14:繼續編輯分頁的內容
系列文
從0到有做出一個商家網頁30
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言